<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>设置</el-breadcrumb-item>
			  <el-breadcrumb-item>计量单位</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="content">
			<!--start 下拉-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="vue_add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="vue_add">
						<div class="search-title">
							<p>新增计量单位</p>
						</div>
						<div class="form">
							<el-row>
								<el-col :span="11">
									<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
									  <el-form-item label="单位名称" prop="unitName">
									    <el-input v-model="ruleForm.unitName"></el-input>
									  </el-form-item>
									  <el-form-item>
									    <el-button type="primary" :disabled="clickBtn" @click="addOk">确定</el-button>
									    <el-button @click="addCancel">取消</el-button>
									  </el-form-item>
									</el-form>
								</el-col>
							</el-row>
						</div>
					</div>
				</transition>
			</div>
			<!--end 下拉-->
			<ul class="wrapUl">
				<li class="">
					<el-row type="flex" class="row-bg" justify="space-between">
					  <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
					  <el-col :span="2">
					  	<div class="grid-content bg-purple textR">
					  		<el-button type="primary" @click="vue_add=true">新增</el-button>
					  	</div>
            		  </el-col>
					</el-row>
				</li>
				<!--<li class="title">
					<el-row type="flex" class="row-bg" justify="space-between">
					  <el-col :span="12"><div class="grid-content bg-purple">
					  	<p>计量单位</p>
					  </div></el-col>
					</el-row>
				</li>-->
				<li class="noWrapUl">
					<ul class="active basicContentWrap" ref="contentWrap">
						<li v-for="(item,index) in basicUnits.list">
							<el-row type="flex" class="row-bg" justify="space-between">
							  <el-col :span="12"><div class="grid-content bg-purple">
							  	<p ref="liItem">{{item.unitName}}</p>
							  </div></el-col>
							  <el-col :span="6"><div class="grid-content bg-purple textR setBox">
							  	<span @click="deleteFn(item.unitCode)" class="iconfont font12 setbtn el-breadcrumb__item__inner">&#xec50;删除</span>
							  </div></el-col>
							</el-row>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!--end content-->
	</section>
</template>


<script>
	export default {
		data(){
			return {
				clickBtn:false,                 //请求数据后禁用按钮	
				vue_add:false,
				keyId:'',
				ruleForm:{
					unitName: ''
				},
				rules:{
					unitName: [
			            { required: true, message: '单位名称不能为空', trigger: 'blur' }
			        ]
				},
				basicUnits:{
					list:[],			//列表数据
					pageTools:{},		//分页数据
					sumInfo:{}
				}
			}
		},
		methods:{
			deleteFn(keyId) {
		        this.$confirm('确认删除此单位？', '确认', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          cancelButtonClass:"fr",
		          confirmButtonClass:"fr",
		          customClass:"clearfixBox"
		        }).then(() => {
		          //点击确定的回调
		          this.axios({
	  					method: 'DELETE',
	  					url: '/v3/basic/units/'+keyId
					}).then((res) => {
						this.Public.openSuccess(this,"操作成功！")
						this.queryListAll();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data)
					});
		        }).catch(() => {
		          //点击取消的回调
		        });
		    },
      		//新增
      		addOk() {
      			this.$refs.ruleForm.validate((valid)=>{
      				if(valid){
						//新增数据请求
						this.clickBtn=!this.clickBtn;
		  				this.axios({
		  					method: 'post',
		  					url: '/v3/basic/units',
							data:{
								"unitName":this.ruleForm.unitName
							}
						}).then((res) => {
							this.clickBtn=!this.clickBtn;
							this.vue_add = false;
	      					this.$refs.ruleForm.resetFields();
	      					this.basicUnits.list.unshift(res.data);
	      					this.Public.openSuccess(this,"操作成功！");
						}).catch((err)=>{
							this.clickBtn=!this.clickBtn;
							this.Public.openError(this,err.response.data);
							this.$refs.ruleForm.resetFields();
						});
      				}else{
      					return false;
      				}
      			});
      		},
      		//新增取消按钮
      		addCancel() {
      			this.vue_add = false;
      			this.$refs.ruleForm.resetFields();
      		},
      		queryListAll(){
      			this.axios({
					method: 'post',
					url:"/v3/basic/units/listAll",
					data:{}
				}).then((res) => {
					this.basicUnits.list = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
      		}
		},
		created(){
			//获取数据请求
			this.queryListAll();
		},
		mounted(){
			document.querySelector(".noWrapUl").style.height = (document.documentElement.clientHeight-180)+'px';
		}


	}
</script>

<style scoped>
  section {
  	display: flex;
  	flex-direction: column;
  	flex: 1;
  }
  div.location {
  	flex: 0 0 10px;
  	padding: 3px 0 15px 0;
  }
  div.content {
  	position: relative;
  	flex: 1;
  	width: 100%;
  	background-color: #fff;
  }
  div.content ul:not(.active) {
	padding: 0 20px 20px 20px;
  }
  .noWrapUl{
  	overflow-y: auto;
  }
  .wrapUl>li:not(.noWrapUl) {
  	width: 100%;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #e6ecf2;
	transition: .2s;
	background-color: #fff;
  }
  div.content ul.active li {
	width: 100%;
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #e6ecf2;
	transition: .2s;
	background-color: #fff;
  }
  div.content ul.active {
	overflow-y: auto;
  }
  div.content ul.active li:hover {
	background-color: #F5F7FC;
  }
  div.content ul.active li:hover div.setBox{
	display: block;
  }
  div.content ul.active li div.setBox{
	display: none;
	padding-right: 10px;
  }
  li p {
  	padding-left: 20px;
  }
  .textR {
  	text-align: right;
  }
  .font12 {
  	font-size: 12px;
  }
  .setbtn {
  	margin-left: 30px;
  }
  /* start add */
  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
    /*background-color: rgba(0, 0, 0, .2);*/
  }
  .specific-search {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }
  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
  }
  .form {
    width: 1000px;
    background: #fff;
    margin: 20px 0;
  }
  .search-btn {
  	margin-top: 50px;
  }
  .specific-search {
  	height: 260px;
  }
  /* end add */
  .fade-enter-active, .fade-leave-active {
	transition: .4s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
  .slideDown-enter-active, .slideDown-leave-active {
	transition: .4s;
  }
  .slideDown-enter, .slideDown-leave-active {
    opacity: 0;
  }
  div.content ul li.title {
  	font-size: 14px;
  	background-color: #EEF1F9;
  }
</style>
